<template>
	<div class="detail-container">
		<el-collapse accordion class="detail-container-collapse">
			<el-collapse-item :name="value" class="detail-container-collapse-item" v-for="value in 10" :key="value">
				<!-- 标题 -->
				<template #title="{ isActive }">
					<div class="detail-container-collapse-item-title">
						<img src="~/assets/svgs/zhi_ding.svg" alt="置顶" />
						<div :class="['title-wrapper', { 'is-active': isActive }, { 'is-blod': isActive }]">我忘记了密码，无法登录。 我该怎么办？</div>
					</div>
				</template>
				<!-- 展开图标 -->
				<template #icon="{ isActive }">
					<el-button class="detail-container-collapse-item-btn">
						{{ isActive ? '收起' : '展开' }}
						<el-icon>
							<ArrowUp v-if="isActive" />
							<ArrowDown v-else />
						</el-icon>
					</el-button>
				</template>
				<!-- 正文 -->
				<div class="detail-container-collapse-item-content">
					Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users
					are used to; Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that
					the users are used to; Consistent with real life: in line with the process and logic of real life, and comply with languages and
					habits that the users are used to;
				</div>
				<!-- 时间 -->
				<div class="detail-container-collapse-item-content-time">
					<!-- <div style="height: 50px; flex: 1"></div> -->
					<el-menu
						mode="horizontal"
						text-color="#222222"
						active-text-color="#222222"
						class="detail-container-collapse-item-content-time-update"
						:popper-offset="-10"
						:popper-style="{
							backgroundColor: 'red',
						}"
					>
						<el-sub-menu index="1" style="background-color: white" popper-class="one-sub-menu">
							<template #title> <span class="gray">更新时间：</span> <span class="black">2023-11-11 11:11:11</span> </template>
							<el-menu-item index="1-1"><span class="gray">更新时间：</span> <span class="black">2023-11-11 11:11:11</span> </el-menu-item>
							<el-menu-item index="1-2"><span class="gray">更新时间：</span> <span class="black">2023-11-11 11:11:11</span> </el-menu-item>
							<el-menu-item index="1-3"><span class="gray">更新时间：</span> <span class="black">2023-11-11 11:11:11</span> </el-menu-item>
						</el-sub-menu>
					</el-menu>
					<div class="detail-container-collapse-item-content-time-upload">
						<span class="gray">上传时间：</span><span class="black">2024-10-30 15:20</span>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup>
	import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
	import { useTemplateRef } from 'vue';
	const timeIns = useTemplateRef('time');
</script>

<style scoped lang="scss">
	$iconWidth: 20px;
	$iconMarginRight: 8px;
	.detail-container {
		width: 100%;
		height: 100%;
		&:deep(.el-collapse-item__content) {
			padding: 0;
		}
		&:deep(.el-sub-menu__title) {
			padding-left: 0;
			border: none !important;
		}
		.detail-container-collapse {
			border-top: none;
		}
		.detail-container-collapse-item-content {
			padding-left: calc($iconWidth + $iconMarginRight);
			@include font(_, 14px, 22px, 400, var(--issue-text-content-black));
		}
		.detail-container-collapse-item-content-time {
			padding-left: calc($iconWidth + $iconMarginRight);
			position: relative;
			--el-menu-horizontal-height: 50px;
			@include flex(_, space-between);
			.detail-container-collapse-item-content-time-update {
				padding: 0;
				border: 0;
				flex: 1;
			}
		}
	}
	.detail-container-collapse-item-title {
		height: 74px;
		@include flex(_, flex-start);
		img {
			width: $iconWidth;
			margin-right: $iconMarginRight;
		}
		.title-wrapper {
			@include font(_, 16px, 22px, 400, var(--issue-text-detail-title-color));
			&:hover {
				color: var(--issue-text-hover-color);
			}
		}
		.is-blod {
			font-weight: 700;
		}
	}
	.detail-container-collapse-item-btn {
		width: 73px;
		height: 29px;
		color: var(--issue-text-normal-color);
		background-color: var(--issue-bg-btn-color);
		border: 1px solid var(--issue-text-radius-color);
		border-radius: 324px;
	}
	.gray {
		color: var(--issue-text-content-gray);
	}
	.black {
		color: var(--issue-text-content-black);
	}
</style>
<style lang="scss">
	.one-sub-menu {
		li {
			&:hover {
				--el-menu-hover-bg-color: white;
				cursor: auto;
			}
		}
	}
</style>
